<template>
  <div class="content">
    <el-card class="card list-warp small-padding-card">
      <div class="list-title">
        <span>现状调洪演算结果</span>
      </div>
      <el-table
        :data="floodResult"
        stripe
        style="width: 100%; height: 11vh; overflow-y: auto"
      >
        <el-table-column prop="elevation" label="滩顶高程(m)"></el-table-column>
        <el-table-column
          prop="normalWaterLevel"
          label="正常运行水位(m)"
        ></el-table-column>
        <el-table-column
          prop="waterMark"
          label="最高洪水位(m)"
        ></el-table-column>
        <el-table-column
          prop="safeHeight"
          label="最小安全超高(m)"
        ></el-table-column>
        <el-table-column
          prop="floodHeight"
          label="调洪高度(m)"
        ></el-table-column>
        <el-table-column
          prop="capacity"
          label="调洪库容(万m³)"
        ></el-table-column>
        <el-table-column
          prop="beachLength"
          label="最小干滩长度(m)"
        ></el-table-column>
        <el-table-column
          prop="releaseFloodFlow"
          label="最大下泄流量(m³/s)"
        ></el-table-column>
        <el-table-column prop="theDate" label="演算时间"></el-table-column>
      </el-table>
    </el-card>
    <el-card class="new-box">
      <div class="calculus-box" v-show="floodRoutingImgShow">
        <img
          :src="require('../../../assets/safety-technology/background.png')"
          alt=""
        />
        <div class="elevation-top">
          滩顶
          <span> {{ info.elevation }}(m) </span>
        </div>

        <div class="safeHeight-big">
          安全超高
          <span>{{ info.safeHeight }}(m)</span>
        </div>

        <div class="beachLength-big">
          干滩长度
          <span>{{ info.beachLength }}(m)</span>
        </div>

        <div class="capacity-big">
          调洪库容
          <span>{{ info.capacity }}(万m³)</span>
        </div>

        <div class="waterMark-big">
          最高洪水位
          <span>{{ info.waterMark }}(m)</span>
        </div>

        <div class="normalWaterLevel-big">
          正常运行水位
          <span>{{ info.normalWaterLevel }}(m)</span>
        </div>
      </div>
      <p v-show="floodRoutingImgShows" class="nullData">暂无数据</p>
    </el-card>
    <el-card class="card chart-warp small-padding-card">
      <div
        v-show="floodRoutingShow"
        style="height: 27.5vh"
        id="chart"
        ref="chart"
      ></div>
      <p v-show="floodRoutingShows" class="nullData">暂无数据</p>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import echarts from "echarts";

export default {
  name: "FloodRouting",
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      floodList: null,
      floodResult: [],
      show: true,
      info: {
        safeHeight: null,
        elevation: null,
        waterMark: null,
        capacity: null,
        beachLength: null,
        normalWaterLevel: null,
      },
      floodRoutingShow: true,
      floodRoutingShows: false,
      floodRoutingImgShow: true,
      floodRoutingImgShows: false,
    };
  },
  mounted() {
    this.getFloodList();
  },
  methods: {
    async getFloodList() {
      let floodProcess = [],
        floodDischarge = [],
        hour = [],
        maxfloodProcess = null,
        minfloodDischarge = null;
      axios({
        url: `/group/floodRouting1/getFloodRoutingData1/${sessionStorage.getItem(
          "sensorId"
        )}`,
        method: "get",
      }).then((res) => {
        if (res.data.resultCode == "200") {
          //当前视口宽度
          let nowClientWidth = document.documentElement.clientWidth;
          // 换算方法
          let nowSize = function (val, initWidth = 1920) {
            return val * (nowClientWidth / initWidth);
          };
          this.floodResult = [];
          this.floodList = res.data.parameter.processList; //演算结果折线图
          let floodResults = [
            {
              beachLength: "",
              capacity: "",
              elevation: "",
              floodHeight: "",
              safeHeight: "",
              normalWaterLevel: "",
              releaseFloodFlow: "",
              waterMark: "",
              theDate: "",
            },
          ];
          //演算结果表
          floodResults.theDate = res.data.parameter.floodRoutingResult.theDate;
          floodResults.elevation =
            res.data.parameter.floodRoutingResult.elevation.toFixed(2);
          floodResults.beachLength =
            res.data.parameter.floodRoutingResult.beachLength.toFixed(2);
          if (res.data.parameter.floodRoutingResult.capacity !== null) {
            floodResults.capacity =
              res.data.parameter.floodRoutingResult.capacity.toFixed(2);
          }
          floodResults.floodHeight =
            res.data.parameter.floodRoutingResult.floodHeight.toFixed(2);
          floodResults.normalWaterLevel =
            res.data.parameter.floodRoutingResult.normalWaterLevel.toFixed(2);
          floodResults.releaseFloodFlow =
            res.data.parameter.floodRoutingResult.releaseFloodFlow.toFixed(2);
          floodResults.waterMark =
            res.data.parameter.floodRoutingResult.waterMark.toFixed(2);
          floodResults.safeHeight =
            res.data.parameter.floodRoutingResult.safeHeight.toFixed(2);
          this.floodResult.push(floodResults);
          this.info.safeHeight =
            res.data.parameter.floodRoutingResult.safeHeight.toFixed(2);
          this.info.elevation =
            res.data.parameter.floodRoutingResult.elevation.toFixed(2);
          this.info.waterMark =
            res.data.parameter.floodRoutingResult.waterMark.toFixed(2);
          if (res.data.parameter.floodRoutingResult.capacity !== null) {
            this.info.capacity =
              res.data.parameter.floodRoutingResult.capacity.toFixed(2);
          }
          this.info.beachLength =
            res.data.parameter.floodRoutingResult.beachLength.toFixed(2);
          this.info.normalWaterLevel =
            res.data.parameter.floodRoutingResult.normalWaterLevel.toFixed(2);
          this.floodList.forEach((item) => {
            floodProcess.push(item.comeFloodFlow.toFixed(2));
            floodDischarge.push(item.releaseFloodFlow.toFixed(2));
            hour.push(item.hour);
          });
          maxfloodProcess = Math.max(...floodProcess);
          minfloodDischarge = Math.min(...floodDischarge);
          var myChart = echarts.init(document.getElementById("chart"));
          let option = {
            legend: {
              data: ["洪水过程线", "泄流过程线"],
              top: 10,
            },
            tooltip: {
              trigger: "axis",
            },
            xAxis: {
              name: "时间(h)",
              data: hour,
              nameTextStyle: {
                lineHeight: 48,
                fontSize: nowSize(16),
              },
              splitLine: {
                show: false,
              },
            },
            yAxis: {
              name: "流量m^3/s",
              nameLocation: "center",
              // max: maxfloodProcess,
              // min: minfloodDischarge,
              nameTextStyle: {
                lineHeight: 48,
                fontSize: nowSize(16),
              },
              splitLine: {
                show: false,
              },
            },
            grid: {
              // x: 80,
              // y: 50,
              // x2: 80,
              // y2: 25,
              top: "15%",
              bottom: "25%",
            },
            series: [
              {
                type: "line",
                name: "洪水过程线",
                encode: { x: 0, y: 1 },
                data: floodProcess,
                smooth: true,
              },
              {
                type: "line",
                name: "泄流过程线",
                encode: { x: 0, y: 1 },
                data: floodDischarge,
                smooth: true,
                lineStyle: {
                  type: "dashed",
                },
              },
            ],
          };
          myChart.setOption(option);
        } else if (res.data.resultCode == "204") {
          this.floodRoutingShow = false;
          this.floodRoutingShows = true;
          this.floodRoutingImgShow = false;
          this.floodRoutingImgShows = true;
        } else if (res.data.parameter.floodRoutingResult.safeHeight < 0.5) {
          this.$alert("调洪失败，危险！", "警告", {
            confirmButtonText: "确定",
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.content {
  height: 87vh;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.el-table::before {
  z-index: inherit;
}
.card {
  width: 100%;
  display: block;
  margin-bottom: 0.5vh;
  margin: 0;
  padding: 0;
  /* overflow: auto; */
}

.img {
  position: relative;
  transform: translateY(-40px);
  width: auto;
  height: 45vh;
  display: block;
  margin: 0 auto;
}
.new-box {
  height: 2.05rem;
  width: 100%;
}
.new-box >>> .el-card__body {
  padding: 0;
}
.img-warp {
  height: 46%;
  width: 100%;
  /* background: pink; */
  margin: 0;
  padding: 0;
}
.img-warp img {
  display: inline-block;
  width: 100%;
  z-index: 0;
}
.list-warp {
  height: 14.8%;
}
.list-title {
  background-color: #f0f0f0;
}
.list-title > span {
  margin: 0.025rem 0.025rem 0.025rem 0.125rem;
  font-size: 0.06rem;
}
.chart-warp {
  height: 1.5rem;
}

.calculus-box {
  position: relative;
  width: 80%;
  text-align: center;
  font-size: 0.04rem;
  margin: 0 auto;
}
.calculus-box div {
  font-size: 0.1rem;
}
.calculus-box span {
  font-size: 0.09rem;
  color: #111;
  font-weight: bolder;
}
.calculus-box >>> .el-card__body {
  padding: 0;
}
.calculus-box img {
  display: inline-block;
  width: 100%;
  z-index: 0;
}
.nullData {
  text-align: center;
  color: #949393;
  line-height: 5;
}

/* 滩顶 */
.calculus-box .elevation-top {
  position: absolute;
  top: 19.2%;
  right: 73%;
}

/* 最小安全超高 */
.calculus-box .safeHeight-big {
  position: absolute;
  top: 36.4%;
  right: 76.5%;
}

/* 最小干滩长度 */
.calculus-box .beachLength-big {
  position: absolute;
  top: 5.8%;
  left: 32%;
  width: 11%;
}

/* 调洪库容 */
.calculus-box .capacity-big {
  position: absolute;
  top: 28.5%;
  right: 31.8%;
}

/* 最高洪水位 */
.calculus-box .waterMark-big {
  position: absolute;
  top: 33%;
  right: 6%;
}

/* 正常运行水位 */
.calculus-box .normalWaterLevel-big {
  position: absolute;
  top: 45%;
  left: 89%;
  width: 11%;
  height: 0.26rem;
}
</style>

<style>
.small-padding-card > .el-card__body {
  padding: 8px;
}
</style>